<template>
  <div>
    <!--工具类-->
    <Row v-mobile="false">
      <i-col span="24" style="text-align: right">
        <Button type="primary" icon="md-add" class="y_condition"
                @click="addNew">添加角色
        </Button>
      </i-col>
      <divider></divider>
    </Row>

    <Row class-name="y_query_right">
      <Input v-model.trim="roleSearchParams.roleNameSearch" placeholder="请输入角色名称" clearable
             class="y_condition"></Input>
      <Button type="primary" style="" icon="md-search" class="y_condition"
              @click="search">查询
      </Button>

    </Row>

    <!--表格和分页-->
<!--    <Table stripe border :context="this" :columns="tableTitles" :data="roleList"-->
<!--           class="table_css"-->
<!--           no-data-text="暂无数据" stripe></Table>-->
    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="roleList==null || roleList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in roleList" class="item_hover">
          <i-col flex="auto">

            <KeyValueView oneline> <span style="font-weight: bold">{{item.name}}</span></KeyValueView>

            <KeyValueView title="职能说明"  >
              <span >{{item.note}}</span>
            </KeyValueView>
            <KeyValueView title="创建时间" oneline >
              <span v-text="$tiyBJTime(item.createtime)"></span>
            </KeyValueView>
          </i-col>
          <i-col >
            <div class="item_bottom" style="padding: 0.5rem " >
              <i-button type="primary" size="small"  style="margin-right:10px" @click="editItem(index)">编辑</i-button>
              <i-button type="error" size="small"  style="margin-right:10px" @click="deleteAction(index)">删除</i-button>
            </div>
          </i-col>
        </ListItem>
      </div>
    </List>


    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange"
            show-sizer
            show-elevator/>
    </div>
    <!--删除确认弹出框-->
    <Modal
      v-model="status.modalDelete.isShow"
      title="确认删除"
      :loading="status.modalDelete.isLoading"
      @on-ok="deleteItem">
      <p>确认删除角色<strong> {{status.modalDelete.role.name}}?</strong></p>
    </Modal>

    <!--角色编辑弹出框-->
    <Modal
      v-model="status.modalModify.isShow"
      :title="status.modalModify.title"
      :closable="false"
      :mask-closable="false"
      :loading="status.modalModify.isLoading"
      :styles="{top: '20px',bottom:'20px',width:'700px'}"
      @on-ok="newOrModifyRole">
      <div style="text-align: center;border: 1px solid #9c27b0;padding: 0.5rem 0px;margin: 0px 3rem">
        <p><strong>重要说明</strong> : 权限设置时,父节授权后,才能对子节点进行授权操作.</p>
      </div>

      <Form ref="modifyRoleItem" :model="role" :rules="ruleRole" :label-width="100"
            class="modal_newuser_form">
        <FormItem label="角色名称 : " prop="name">
          <Input v-model.trim="role.name" placeholder="请输入"
                 class="modal_newuser_form_input"></Input>
        </FormItem>
        <FormItem label="职能说明 : " prop="note">
          <Input v-model.trim="role.note" placeholder="请输入"
                 class="modal_newuser_form_input"></Input>
        </FormItem>
        <FormItem label="角色权限 : " ref="roleTree">
          <Tree :data="authTreeData" :render="renderContent" @on-check-change="checkedRoles"></Tree>
        </FormItem>
      </Form>
    </Modal>
  </div>

</template>

<!--javascript 代码-->
<script>
    import tiyData from "./js/role/role_data"
    import KeyValueView from "../widgets/KeyValueView";

    import {
        init,
        add,
        modify,
        deleted,
        webAddOrModify,
        webDelete,
        webList,
        webModuleFunctionList
    } from "./js/role/role_funs"
    import ICol from "view-design/src/components/grid/col";

    export default {
      components: {KeyValueView},
        data() {
            return {
                tPage: tiyData.tPage,
                status: tiyData.tStatus,
                role: tiyData.tParams.role,
                //验证时的 rule
                ruleRole: tiyData.tStatus.rules,
                // roleTreeData: tiyData.tTreeDatas.roleTreeData,
                authTreeData: tiyData.tTreeDatas.authTreeData,
                //搜索条件
                roleSearchParams: tiyData.tParams,
                roleList: tiyData.tData.roleList,

                tempSelectedRules: []
            }
        },
        computed: {},
        methods: {

            renderContent(h, {root, node, data}) {
                return h('span', [
                    h('Icon', {
                        props: {
                            type: this.iconName(data.level)
                        },
                        style: {
                            marginRight: '8px',
                            color: this.hasSelectedNode(data) ? '#00c853' : '#757575'
                        }
                    }),
                    h('span', this.titleName(data)),
                    h('Button', {
                        props: {
                            type: 'dashed',
                            size: 'small'
                        },
                        style: {
                            marginRight: '8px',
                            marginLeft: '8px',
                            color: this.hasSelectedNode(data) ? '#00c853' : '#757575',
                            display: this.hasParentSelected(data) ? 'inline-block' : 'none'
                        },
                        on: {
                            click: () => {
                                if (this.hasSelectedNode(data)) {
                                    this.removeTempRole(data)
                                } else {
                                    this.addTempRole(root, node, data)
                                }

                            }
                        }
                    }, this.hasSelectedNode(data) ? "移除" : "授权")
                ])
            },

            titleName(data) {
                var result = data.title;
                if (data.extra.type === 2) {
                    result = "页面 - " + result;
                }
                result += " : " + data.extra.code;

                return result;
            },
            iconName(type) {
                if (type === 1) {
                    return "md-bookmarks";
                }
                if (type === 2) {
                    return "md-bookmark";
                }

                if (type === 3) {
                    return "ios-warning";
                }
            },

            hasParentSelected(data) {
                if (data.extra.type === 1) {
                    return true;
                } else {
                    let finder = this._.find(this.tempSelectedRules, function (item) {
                        return item.extra.id === data.extra.parentId;

                    });
                    return finder !== undefined;
                }
            },

            hasSelectedNode(data) {

                let finder = this._.find(this.tempSelectedRules, function (item) {
                    return item.extra.id === data.extra.id;
                });
                return finder !== undefined;

            },

            addTempRole(root, node, data) {
                this.tempSelectedRules.push(data);
                // let self = this;
                // if(data.extra.type===1){
                //     this._.forEach(data.children,function (item) {
                //       self.tempSelectedRules.push(item);
                //     });
                // }

            },

            removeTempRole(data) {
                let self = this;
                this.tempSelectedRules = this._.remove(this.tempSelectedRules, function (item) {
                    // if(data.extra.type===2 && item.extra.id===data.extra.parentId){
                    //   return false;
                    // }
                    return item.extra.id !== data.extra.id;
                });
            },

            switchExpand() {
                this.$store.commit('setUIExpanded', !this.isExpanded);
            },
            editItem(index) {
                modify(this, tiyData, index);
            }
            ,
            deleteAction(index) {
                deleted(this, tiyData, index)
            },
            deleteItem() {
                webDelete(this, tiyData);
            },
            search() {
                tiyData.tPage.currentPage = 1;
                webList(this, tiyData);
            },
            getRoleListFromServer() {
                webList(this, tiyData);
            },
            addNew() {

                add(this, tiyData);
            },
            newOrModifyRole() {
                webAddOrModify(this, tiyData, "modifyRoleItem");
            },
            changePage(page) {
                tiyData.tPage.currentPage = page;
                webList(this, tiyData);
            },
            sizeChange(p) {
                tiyData.tPage.stepNumber = p;
                webList(this, tiyData);
            },
            checkedRoles(roles) {
                this.tempSelectedRules = roles;
            }

        },
        created() {
            init(this, tiyData);
            // webList(this, tiyData);
            webModuleFunctionList(this, tiyData);
        }
    }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 380px;
    margin-right: 10px;
  }
</style>
